<template>
  <el-dialog v-model="visible" title="申请客户外出" width="500px" :close-on-click-modal="false">
    <el-form ref="formRef" :model="form.data" :rules="form.rules" label-width="110px" v-loading="loading">
      <el-form-item label="申请客户">
        <el-input :value="clientName" disabled />
      </el-form-item>
      <el-form-item label="外出时间" prop="outTime">
        <el-date-picker
            v-model="form.data.outTime"
            type="datetime"
            placeholder="选择外出时间"
            style="width:100%"
        />
      </el-form-item>
      <el-form-item label="预计返回时间" prop="expectReturnTime">
        <el-date-picker
            v-model="form.data.expectReturnTime"
            type="datetime"
            placeholder="选择预计返回时间"
            style="width:100%"
        />
      </el-form-item>
      <el-form-item label="外出事由" prop="outReason">
        <el-input
            v-model="form.data.outReason"
            type="textarea"
            :rows="3"
            placeholder="请输入详细的外出事由"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible=false">取消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">提交申请</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { applyForOuting } from '@/api/apiList/outing.js'; // 导入API

const emit = defineEmits(['success']);

const visible = ref(false);
const loading = ref(false);
const formRef = ref(null);
const clientName = ref('');

// --- 表单数据和规则 ---
const getInitialForm = () => ({
  clientId: null,
  outTime: new Date(),
  expectReturnTime: null,
  outReason: ''
});
// --- 校验规则 ---
const validateTime = (rule, value, callback) => {
  if (value && form.data.outTime && new Date(value) <= new Date(form.data.outTime)) {
    callback(new Error('预计返回时间必须晚于外出时间'));
  } else {
    callback();
  }
};

const form = reactive({
  data: getInitialForm(),
  rules: {
    outTime: [{ required: true, message: '请选择外出时间', trigger: 'change' }],
    expectReturnTime: [
      { required: true, message: '请选择预计返回时间', trigger: 'change' },
      { validator: validateTime, trigger: 'change' }
    ],
    outReason: [{ required: true, message: '请输入外出事由', trigger: 'blur' }],
  }
});

// --- 方法 ---

// open方法，由父组件调用
const open = (client) => {
  Object.assign(form.data, getInitialForm());
  form.data.clientId = client.clientId;
  clientName.value = client.clientName;
  if (formRef.value) formRef.value.clearValidate();
  visible.value = true;
};

// 提交表单
const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async (valid) => {
    if (!valid) return;
    loading.value = true;
    try {
      await applyForOuting(form.data);
      ElMessage.success('外出申请提交成功');
      visible.value = false;
      emit('success'); // 通知父组件刷新列表或执行其他操作
    } catch(e) {
      console.error("提交外出申请失败:", e);
    }
    finally {
      loading.value = false;
    }
  });
};

// 将open方法暴露给父组件
defineExpose({ open });
</script>
